<template>
   <div class="witness-page">
      <breadcrumb :bread-path-list="breadPathList" last-bread-title="今日项目查询" :show-back-btn-flag="false">
         <div style="display: flex; flex: 1">
            <span style="margin-left: auto;color: #fff;">
               <i class="el-icon-refresh-left el-icon--left" @click="returenHandle">返回</i>
            </span>
         </div>
      </breadcrumb>
      <div class="witness-body">
         <div class="layout-header content-header">
            <el-row :gutter="20" style="height: 90%;">
               <el-col style="background-color: #374A64;height: 100%;overflow: hidden;" :span="5">
                  <el-scrollbar style="height: 97%;">
                     <el-collapse v-model="activeNamesitem" style="margin-top: 10px;border: none;" accordion>
                        <el-collapse-item style="border: none;" v-for="(item, index0) in listData" :key="index0"
                           :name="item.projectId">
                           <template slot="title">
                              <tagleft :float-text="item"></tagleft>
                           </template>
                           <el-collapse v-model="activeNamesitem1" style="border: none;" accordion>
                              <el-collapse-item v-for="(item1, index) in item.bidVOList" :key="index" :name="item1.bidId">
                                 <template slot="title">
                                    <!-- 设置一个圆形盒子 -->
                                    <div
                                       style="margin-left: 5%;background-color: gray; border-radius: 50%; width: 20px; height: 20px;display: flex;justify-content: center; align-items: center;">
                                       <span style="color:#364960">评</span>
                                       <!-- <span v-else style="color:#364960">开</span> -->
                                    </div>
                                    <span style="margin-left: 2%;">{{ item1.bidName }}</span>
                                 </template>
                                 <template v-for="(itemchild, indexchild) in item1.personVOList">
                                    <left-item
                                    style="margin-bottom: 2px;"  :key="indexchild"
                                    :data="itemchild"
                                    :selectChange="(x)=>selectChange(x,item1,item)"
                                    ></left-item>
                                 </template>

                              </el-collapse-item>

                           </el-collapse>
                        </el-collapse-item>
                     </el-collapse>
                  </el-scrollbar>
               </el-col>
               <el-col style="background-color: #2C384D;height: 100%;" :span="19">
                  <el-form ref="formSearch" :model="formSearch" :inline="true" class="form-search" size="normal">
                     <el-form-item label="选择时间" prop="date" class="itemColor">
                        <el-date-picker v-model="formSearch.date" :clearable="true" type="daterange" align="right"
                           style="width: 240px" unlink-panels value-format="yyyy-MM-dd" range-separator="至"
                           start-placeholder="开始日期" end-placeholder="结束日期" />
                     </el-form-item>
                     <el-form-item label="项目类型" prop="date" class="itemColor">
                        <el-select v-model="formSearch.projectType" option-max-width="180px" placeholder="请选择" clearable>
                          <el-option  label="全部" value="" />
                           <el-option  label="政府" value="ZFCG" />
                           <el-option  label="建设工程" value="JSGC" />

                        </el-select>
                     </el-form-item>
                     <el-form-item label="" prop="date" class="itemColor">
                        <el-input placeholder="搜索人员名称"  v-model="search" class="input-with-select">
                           <el-button slot="append" icon="el-icon-search" @click="gettrackListProjectTrack" type="primary"
                              class="custom-button"></el-button>
                        </el-input>
                     </el-form-item>
                  </el-form>
                  <div style="background-color: #1F2A3B;margin-bottom: 10px; height: 20%; display: flex; justify-content: space-between; align-items: center;">
                     <el-scrollbar >
                      <el-steps  :active="active" class="my-steps">
                        <template  v-for="(item,index) in list_step" >
                          <el-step :key="index"   :icon="item.type === 1 ? 'iconfont icon-bluedian' :  'iconfont icon-jingbaodeng'" :title="item.title" >
                            <!-- <i  class="icon-yujing" slot=icon ></i> -->
                            <template #title>
                                <p @click="fnGetAllAlarmId(item)">{{ item.title }}</p>
                            </template>
                            <template #description>
                              <p v-if="item.title!=='查看'">{{item.time }}</p>
                              <div v-if=" item.show" class="box_description">
                                <div class="close"> <i @click="item.show = false" class="el-icon-close"></i></div>
                                <p>识别到：{{ item.content.alarmTime }}</p>
                                <p>行为：{{ item.content.alarmContent }}</p>
                              </div>
                            </template>
                          </el-step>
                        </template>
                    </el-steps>
                 </el-scrollbar>
                  </div>
                  <div style="background-color: #1F2A3B; height: 68%;">
                     <proViewComponent :progress="progress"  ref="proView" />
                  </div>
               </el-col>
            </el-row>
         </div>


      </div>
      <!-- <DialogDetail :visible.sync="dialogDetail" /> -->
   </div>
</template>
<script>
//  import D3Tree from "./components/proViewComponent.vue";
//  import ListCard from "./components/listCard.vue";
//  import DialogDetail from "./components/dialog_detail.vue";
import leftItem from './components/leftItem.vue';
import setpsComponent from './components/setpsComponent.vue';
import proViewComponent from "@/views/witness/components/Object3D/proViewComponent.vue";
import setpsComponentVue from './components/setpsComponent.vue';
import tagleft from './components/tagleft.vue';
import { trackListProjectTrack,trackListTrack ,trackGetAlarm} from "@/api/pageStats";
import * as THREE from "three";
import dayjs from 'dayjs';
export default {
   components: {
      leftItem,
      tagleft,
      proViewComponent,
      setpsComponent
      //   ListCard,
      //   DialogDetail,
      //   D3Tree
   },
   watch:{
      search(val){
         console.log('val',val);
         this.listData.forEach(item=>{
            item.bidVOList.forEach(ite=>{
               ite.personVOList.forEach(it=>{
                  if(it.personName === val){
                     // console.log('包含人',it,ite,item);
                     console.log('找到了');
                     this.activeNamesitem = [item.projectId]
                     this.activeNamesitem1 = [ite.bidId]
                  }
               })
            })
         })
      }
   },
   data() {
      return {
         active:null,
         activeNames:[],
         activeNamesitem:[],
         activeNamesitem1:[],
         breadPathList:[
               {
               title:'统计查询',
               path:'/wintessquery/viewXm'
            },
         ],
         progress:false,
         D3data: {},
         trajectoryStatus: true, // 实时还是历史
         formSearch: {
            date: [],
            projectType: ''
         },
         search:'',
         form: {

         },
         listData:[],
         leftItemData: [
            {
               floatText: '工程'
            },
            {
               floatText: '政采'
            }
         ],
         color_list: [],
         list_step: [],
         // 当前选中的标段-项目信息
         query:{
            pbStartTime:'',
            pbEndTime:''
         }

      };
   },
   mounted() {
      // 修改sidebar组件的data数据
        const startTime = dayjs().format('YYYY-MM-DD')
        const endTime = dayjs().format('YYYY-MM-DD')
         this.formSearch.date = [startTime,endTime]
         this.gettrackListProjectTrack()

   },
   created() {
      // this.color_list = this.generateColors(4)
   },
   methods: {
      //
      // 预警详情
      async fnGetAllAlarmId(item){
      const r = await trackGetAlarm(item.alarmId)
      if (r.code === 0 ){
          this.$set(item,'content',r.data)
        }
        item.show = true
      },
      // 获取步骤条轨迹
      async getTrackListTrack({personIds,projectId,bidId}){
            const params = {
               projectId,
               bidId,
               personIds,
            }
         return await trackListTrack(params)
      },
      fnChangeSteps(alarmIdList=[],cardBindTime='',cardUnBindTime=''){
         // 假数据
         let { pbEndTime, pbStartTime } = this.query
         const list_step = []
         const times = [ cardBindTime,  pbStartTime, pbEndTime, cardUnBindTime]

         const texts = ['进入评标区','开始评标','结束评标','离开评标区']
         const convertToTimestamp= ( date)=>{
            return  new Date(date).getTime()
         }
         // 2预警 1普通
         times.forEach((e,i) => {
         if(!e) return
         let obj = {
            type:1,
            title:texts[i],
            time:times[i],
            show:false
         }
         list_step.push(obj)
         });
         const arr1 = []
         const arr2 = []
         const arr3 = []
         alarmIdList.forEach(x=>{
         const { timestamp,dateTime,alarmId } = x
         let obj = {
               type:2,
               title:'查看',
               time:dateTime,
               alarmId,
               show:false,
               content:null
            }
            // 时间导致type b报错
         if(timestamp > convertToTimestamp(cardBindTime) && timestamp < convertToTimestamp(pbStartTime)){
            arr1.push(obj)
         }else if(timestamp > convertToTimestamp(pbStartTime) && timestamp < convertToTimestamp(pbEndTime)){
            arr2.push(obj)
         }else if(timestamp > convertToTimestamp(pbEndTime) && timestamp < convertToTimestamp(cardUnBindTime)){
            arr3.push(obj)
         }
         })
         if(alarmIdList.length === 0){
            this.progress = false
           this.list_step = [list_step[0],list_step[1]]
           return
         }
         console.log('list_step',list_step);
         if(list_step.length === 2){
         this.list_step  = [list_step[0],...arr2,list_step[1]]
         }else if(list_step.length === 3){
            this.list_step  = [list_step[0],...arr1,list_step[1],...arr2,list_step[2]]
         }else{
            this.list_step  = [list_step[0],...arr1,list_step[1],...arr2,list_step[2],...arr3,list_step[3]]
         }
         this.active = this.list_step.length
      },
      stringToColor (str){
        let hash = 0;
        for (let i = 0; i < str.length; i++) {
          hash = str.charCodeAt(i) + ((hash << 5) - hash);
        }
        const color = `#${((hash >> 0) & 0xFFFFFF).toString(16).padStart(6, '0')}`;
        return color;
      },
      // 选中数据
      async selectChange(x,data,pro){

         const projectId = pro.projectId
         const {bidId,bidName,pbStartTime,pbEndTime,personVOList  } = data
         this.$set(this.query,'pbEndTime',pbEndTime)
         this.$set(this.query,'pbStartTime',pbStartTime)
         const person_checked = [] // 人员轨迹集合
         let alarmIdList = [] //步骤条预警集合
         personVOList.forEach(x=>{
            x.color = this.stringToColor(x.personName)
            if(x.checked){
               person_checked.push(x)
            }
         })

         const p = {
            personIds:person_checked.map(x=>x.personId),
            projectId,
            bidId
         }
         const listTrack = await  this.getTrackListTrack(p)
         if(listTrack.code !== 0) return
         if(listTrack.data.length <=0) return
         listTrack.data.forEach(x=>{
           const item = person_checked.find(z=>x.personId === z.personId)
           item.trackList = x.trackList
           x.trackList.forEach(t=>{
            if(t.type === 1){
               alarmIdList.push(t)
            }
           })

         })
           //  模拟数据
         const convertToTimestamp= ( date)=>{
         return  new Date(date).getTime()
         }
         alarmIdList = [
         {
            "floorName": "十二楼",
            "pos": [54.892, 19.558, 0],
            "speed": [0, 0, 0],
            "dateTime": "2024-12-07 22:59:19",
            "timestamp": convertToTimestamp('2024-12-07 22:59:19'),
            "stc": 0,
            "type": 1,
            "alarmId": "4028fcf393abe04d0193abe26f980062"
         },
         {
            "floorName": "十二楼",
            "pos": [54.892, 19.558, 0],
            "speed": [0, 0, 0],
            "dateTime": "2024-12-07 23:48:18",
            "timestamp": convertToTimestamp('2024-12-07 23:48:18'),
            "stc": 0,
            "type": 1,
            "alarmId": "4028fcf393abe04d0193abe29e5e0075"
         },
         {
            "floorName": "十二楼",
            "pos": [58.033268, 22.66371, 0],
            "speed": [0, 0, 0],
            "dateTime": "2024-12-08 03:48:18",
            "timestamp": convertToTimestamp('2024-12-08 03:48:18'),
            "stc": 0,
            "type": 1,
            "alarmId": "4028fcf393abe04d0193abe285bd0071"
         },
         {
            "floorName": "十二楼",
            "pos": [36.3559, 4.06252, 0],
            "speed": [0, 0, 0],
            "dateTime": "2024-12-08 22:48:56",
            "timestamp": convertToTimestamp('2024-12-08 22:48:56'),
            "stc": 0,
            "type": 1,
            "alarmId": "4028fcf393abe04d0193abe31b270118"
         },
         {
            "floorName": "十二楼",
            "pos": [28.442162, 4.115754, 0],
            "speed": [0, 0, 0],
            "dateTime": "2024-12-08 23:49:07",
            "timestamp": convertToTimestamp('2024-12-08 23:49:07'),
            "stc": 0,
            "type": 1,
            "alarmId": "4028fcf393abe04d0193abe344320145"
         },
         {
            "floorName": "十二楼",
            "pos": [28.430296, 13.751032, 0],
            "speed": [0, 0, 0],
            "dateTime": "2024-12-09 23:49:11",
            "timestamp": convertToTimestamp('2024-12-09 23:49:11'),
            "stc": 0,
            "type": 1,
            "alarmId": "4028fcf393abe04d0193abe353cb014e"
         },
         {
            "floorName": "十二楼",
            "pos": [20.273283, 4.067175, 0],
            "speed": [0, 0, 0],
            "dateTime": "2024-12-09 23:49:18",
            "timestamp": convertToTimestamp('2024-12-09 23:49:11'),
            "stc": 0,
            "type": 1,
            "alarmId": "4028fcf393abe04d0193abe372ca0177"
         },
         ]
            // 模拟数据
         this.query.pbEndTime = '2024-12-09 02:59:19'
         this.query.pbStartTime = '2024-12-08 00:59:19'
         // 如果没有人
         if(person_checked.length === 0){
           this.list_step = []
         }
         // 如果是一个人
         if(person_checked.length === 1){
           let {cardBindTime, cardUnBindTime} = person_checked[0]
            // 模拟数据
            cardBindTime = '2024-12-07 21:59:19'
            cardUnBindTime = '2024-12-10 21:59:19'
           this.fnChangeSteps(alarmIdList,cardBindTime,cardUnBindTime)
         }
           // 如果是多个人
         if(person_checked.length > 1){
            this.fnChangeSteps(alarmIdList)
         }
           //生成轨迹数据
         const colors  = person_checked.map(x=> x.color)
         this.$refs['proView'].handleLineAll(person_checked,colors)
         this.progress = true



      },
      // 获取项目列表
      async gettrackListProjectTrack(){
         const { projectType,date } = this.formSearch
         const p = {
            // "startTime": "2024-10-01 09:58:52",
            // "endTime": "2024-12-18 09:58:52",
            startTime:"",
            endTime:"",
            projectType
         }
         if (this.formSearch.date && this.formSearch.date.length) {
            p.startTime = `${date[0]} 00:00:00`; // 起始时间
            p.endTime = `${date[1]} 23:59:59`; //
          }
      const  r =  await  trackListProjectTrack(p)
      if(r.code === 0 ){
         this.listData = r.data
      }
      },
      returenHandle() {
         // 返回跳转之前的页面
         this.$router.go(-1);
      },
      generateColors(numColors) {
         const getRandomHighlightColor = () => {
            const Color = new THREE.Color();
            const color = Color.clone();
            // 随机生成色相值（0-360）
            // const hue = Math.floor(Math.random() * 360);
            // 亮度设为70%-100%以确保颜色高亮
            const lightness = Math.floor(Math.random() * 31) + 50;
            color.setHSL(Math.random(), 1.0, lightness / 100);
            return color;
         };
         const generatedColors = new Set(); // 使用Set来避免重复
         while (generatedColors.size < numColors) {
            const color = getRandomHighlightColor();
            if (!generatedColors.has(color)) {
               generatedColors.add(color);
            }
         }
         return generatedColors;
      },

   }
};
</script>
<style scoped lang="scss">
$backBG: #2b333f;
$backCard: #193860;

.witness-page {
   background-color: #1d2637;
   box-sizing: border-box;
   position: fixed;
   top: 50px;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 999;

}

.witness-body {
   // margin: 6px;
   // padding: 10px;
   box-sizing: border-box;
   background-color: #2d394e;
   color: #fff;
}

.layout-header.content-header {
   background-color: #1A2634;
   padding: 0 10px;
   min-height: 100%;

}

.layout-body {
   position: relative;
   margin-top: 10px;
   display: flex;
   align-items: center;
   background-color: #3a475e;
   flex-flow: column nowrap;
   padding: 10px;
   box-sizing: border-box;

   .title1_content {
      width: 100%;
      height: 60px;
      display: flex;
      padding: 0px 10px;
      box-sizing: border-box;
      align-items: center;
      background-color: #2a3545;
      justify-content: flex-start;
   }

   .box_3d {
      margin-top: 10px;
      width: 100%;
      height: 100%;
      // flex: 1;
      background-color: #273243;
   }
}

.layout-footer {
   height: 170px;
   display: flex;
   padding: 0 10px;
   background-color: hsl(218, 24%, 30%);
   text-align: left;
}

.boxAllfooter {
   //padding: 4px 10px;
   display: flex;
   flex-flow: nowrap row;
}

.boxAllitem {
   position: relative;
   width: 250px;
   box-sizing: border-box;
   background-color: #2b3a51;
   margin-right: 8px;
   color: #fff;
   padding: 10px;

   // border: 1px solid $backCard;
   .boxAllitem_img {
      width: 34px;
      height: 24px;
      position: absolute;
      right: 0;
      top: 0;

      //background-color: #00c6ff;
      img {
         width: 100%;
         height: auto;
      }
   }

   li {
      line-height: 26px;
   }
}

.lastBox {
   // margin-right: 10px;
   display: flex;
   justify-content: center;
   align-items: center;
   // box-sizing: border-box;
   // padding: 10px 0px;
   width: 80px;
   margin-bottom: 18px;
   // border-left: 20px solid $backBG;
   background-color: #2b3a51;
}

.el-icon-sort {
   transform: rotateZ(90deg);
}


.el-collapse {
   background-color: #2A394D;
   box-shadow: none !important;

   ::v-deep box {
      box-shadow: none !important;
      /* 去除阴影 */
      outline: none !important;
      /* 去除可能的轮廓线 */
   }

   ::v-deep .el-collapse-item {
      // background-color: #2A394D !important;
      color: white;
      border: none;
      box-shadow: none !important;
   }

   ::v-deep .el-collapse-item__header {
      border: none;
      box-shadow: none !important;

      ::v-deep is-active {
         background-color: red !important;
      }
   }
}


.el-collapse-item {
   width: 100%;
   border: none;
   box-shadow: none !important;

   ::v-deep .el-collapse-item__header {
      background-color: #2A394D !important;
      color: white;
      border: none;
      box-shadow: none !important;

      ::v-deep is-active {
         background-color: red !important;
      }
   }



   ::v-deep .el-collapse-item__wrap {
      background-color: #2A394D !important;
      color: white;
      border: none;
      box-shadow: none !important;
   }
}

.el-input-group--append {
   border: none;

   ::v-deep .el-input__inner {
      background-color: #2B3A50 !important;
      color: white !important;
   }

}

.el-select {
   ::v-deep .el-input__inner {
      background-color: #2B3A50 !important;
      color: #fff;
      border: none;
   }
}

.el-date-editor {

   ::v-deep .el-range-input {
      background-color: #2B3A50 !important;
      color: white;
      border: none;

   }
}

.el-range-editor.el-input__inner {
   background-color: #2B3A50 !important;
   border: none !important;

}



.el-step {
   ::v-deep .el-step__text-inner {
      display: none;
   }

}

.el-step .el-step__icon.is-text {
   background-color: #00c6ff;
}


.itemColor {

   ::v-deep .el-form-item__label {
      color: white !important;
      border: none !important;
   }
}

.form-search {
   padding-top: 10px;
   padding-left: 20px;
   background: #364960;
   margin-bottom: 10px;
   justify-content: flex-end;
   display: flex;
   height: 5%;
   color: #fff;
}

.circle {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background-color: #00c6ff;
   margin-right: 5px;

}

.box_description {
   position: absolute;
   top: -50px;
   background: #1890FF;
   border: 1px solid rgba(24, 144, 255, 0.36);
   color: #fff;
   width: 100%;
   text-align: left;
   padding: 8px;
   height: 30px;
   border-radius: 4px;

   .close {
      position: absolute;
      top: 0;
      right: 4px;
   }
}




.Breadcrumb {
   background-color: #364860;
   margin-bottom: 10px;
   border-top: 1px solid #667a95;
   ::v-deep .el-breadcrumb__inner {
      color: #fff;
         /* 当鼠标经过面包屑项时的样式 */
      &:hover{
         color: #409EFF; /* 改变颜色 */
         cursor: pointer; /* 将鼠标指针改为指针样式 */
         text-decoration: underline; /* 添加下划线 */
      }
   }


}
::v-deep .my-steps{
        padding-top: 52px;
        min-height: 90px;
        // transform: scale(0.8);
        // margin-left: -220px;
        .el-step{
          width: 220px;
        }

      }
::v-deep .el-step .el-step__title{
   color: #fff;
}
::v-deep .el-steps--horizontal .el-step.is-step-finish .el-step__icon.is-icon{
   background-color: rgba(24, 144, 255, 0) !important;
   padding: 0;
}
::v-deep .el-steps--horizontal .el-step.is-step-process.is-active .el-step__icon.is-icon{
   background-color: rgba(24, 144, 255, 0) !important;
   padding: 0;
}
</style>
